<template>
  <div>
    <div class="register">
      <van-image :src="require('../assets/img/引导页/2.jpg')" style="width: 60%" />
    </div>
    <van-divider>更好的贵宾服务登录后即可体验</van-divider>
    <div class="fieldPart">
      <van-cell-group>
        <van-field
          v-model="username"
          label="用户名"
          placeholder="请输入用户名"
        />
        <van-field v-model="phone" label="电话" placeholder="请输入电话" />
        <van-field v-model="address" label="地址" placeholder="请输入地址" />
        <van-field v-model="password1" label="密码" placeholder="请输入密码" />
        <van-field
          v-model="password2"
          label="确认密码"
          placeholder="请确认密码"
        />
      </van-cell-group>
    </div>
    <van-button color="rgb(51, 51, 51)" @click="register" class="button"
      >注册</van-button
    >
  </div>
</template>

<script>
import { Toast } from "vant";
import storage from "../mydata/storage.js";
export default {
  name: "registeritem",
  data() {
    return {
      username: "admin",
      phone: "155****5246",
      address: "123456",
      password1: "123456",
      password2: "123456",
    };
  },
  methods: {
    register: function () {
      if (this.username == "" || this.password1 == "" || this.password2 == "")
        Toast.fail("用户名和密码为空");
      else if (this.password1 != this.password2) Toast.fail("两次密码不一致");
      // 用本地存储保存注册的用户名和密码
      else {
        var data = {
          username: this.username,
          password: this.password1,
          phone: this.phone,
          address: this.address,
        };
        storage.set("userinfo", data);
        Toast.success("注册成功！");
        this.$router.push("/login");
      }
    },
  },
};
</script>
<style scoped>
.register {
  width: 360px;
  display: relative;
  margin-top: 75px;
  margin-left: auto;
  margin-right: auto;
}
.fieldPart {
  display: relative;
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}
.button {
  width: 80%;
  height: 40px;
  margin-top: 30px;
  border-radius: 15px;
  margin-right: 10px;
}
</style>
